<template>
  <!-- 编号库 -->
  <div class="page-padding-bg ">
    <div class="top">
      <lay-button class="btn-add" type="primary" size="sm" @click="add" v-permissions="'number_add'">新增</lay-button>
    </div>
    <div class="number-base">

      <lay-table :columns="columns" :default-toolbar="false" :data-source="tableData">
        <template v-slot:operator="{ row }">
          <lay-button size="xs" type="primary" @click="edit(row)" v-permissions="'number_edit'">修改</lay-button>
          <lay-button size="xs" @click="view(row)" v-permissions="'number_view'">查看</lay-button>
          <lay-button size="xs" type="danger" @click="del(row)" v-permissions="'number_delete'">删除</lay-button>
        </template>
      </lay-table>

    </div>

    <!-- 弹层 -->
    <lay-layer v-model="is_visible" :area="['750px', '400px']" :title="visibleTitle" :btn="visibleTitle=='查看编号库'?undefined:visible_opteron" :shadeClose="false">
      <div style="padding: 20px 40px 20px 20px;">
        <lay-form :model="from" ref="layFormRef" :rules="rules5">
          <lay-form-item label="页眉编号" prop="headNumber">
            <lay-input v-model="from.headNumber" size="sm" placeholder="请输入" :disabled="visibleTitle=='查看编号库'?true:false"></lay-input>
          </lay-form-item>
          <lay-form-item label="段落编号" prop="paragraphNumber" required>
            <lay-input v-model="from.paragraphNumber" size="sm" placeholder="请输入" :disabled="visibleTitle=='查看编号库'?true:false"></lay-input>
          </lay-form-item>
          <lay-form-item label="编号类型" prop="type" required>
            <lay-radio-group name="action" v-model="from.type" :disabled="visibleTitle=='新增编号库'?false:true">
              <lay-radio value="0">单点</lay-radio>
              <lay-radio value="1">对比</lay-radio>
              <lay-radio value="2">三点</lay-radio>
              <lay-radio value="3">单料</lay-radio>
              <lay-radio value="4">对比排序</lay-radio>
              <lay-radio value="5">日任务</lay-radio>
              <lay-radio value="6">周任务</lay-radio>
              <lay-radio value="7">签到表</lay-radio>
            </lay-radio-group>
          </lay-form-item>

        </lay-form>

      </div>
    </lay-layer>

  </div>
</template>

<script setup lang="ts">
import http from "@/http/index";
import { ref, onMounted } from "vue";
import { time_YY_DD_MM_HH_MI_SS } from "@/tools/time";
import { layer } from "@layui/layui-vue";
onMounted(() => {
  get_List();
});
// 弹层所有配置
const from = ref({
  headNumber: "", //页眉编号
  paragraphNumber: "", //段落编号
  type: "", //	编号类型 0：单点 1：对比 2：三点 3：单料 4：对比排序 5：日任务 6：周任务
});
const is_visible = ref(false);
const visibleTitle = ref("");
const layFormRef = ref();

const rules5 = ref({
  headNumber: {
    min: 0,
    max: 50,
  },
  paragraphNumber: {
    min: 1,
    max: 50,
  },
});

// 弹层按钮
const visible_opteron = ref([
  {
    text: "确认",
    callback: async () => {
      layFormRef.value.validate(async (isValidate, model, errors) => {
        if (isValidate) {
          let method = "";
          let msg = "";

          if (visibleTitle.value == "新增编号库") {
            method = "post";
            msg = "新增";
          } else if (visibleTitle.value == "修改编号库") {
            method = "put";
            msg = "修改";
          }
          const res = await http.corsApi("/meetingNumber", method, { ...from.value });
          console.log(res);
          if (res.data) {
            layer.msg(`${msg}成功`, { icon: 1 });
            is_visible.value = false;
            await get_List();
          }
        }
      });
    },
  },
  {
    text: "取消",
    callback: async () => {
      is_visible.value = false;
      // await get_List();
    },
  },
]);

const add = async() => {
  is_visible.value = true;
  from.value.headNumber = "";
  from.value.paragraphNumber = "";
  from.value.type = "";
  visibleTitle.value = "新增编号库";
  await get_List();
};
const edit = (row) => {
  is_visible.value = true;
  from.value = row;
  visibleTitle.value = "修改编号库";
};
const del = (row) => {
  layer.confirm("确认要删除吗？", {
    btn: [
      {
        text: "确认",
        callback: async (id) => {
          const res = await http.corsApi("/meetingNumber/batch", "delete", [row.id]);
          console.log(res);
          if (res.data) {
            await get_List();
            await layer.confirm("删除成功", { icon: 1 });
          }
          layer.close(id);
        }, 
      },
      {
        text: "取消",
        callback: async(id) => {
          layer.close(id);
          await get_List();
        },
      },
    ],
  });
};
const view = (row) => {
  is_visible.value = true;
  from.value = row;
  visibleTitle.value = "查看编号库";
};

const columns = ref([

  { title: "编号名称", key: "name" },
  { title: "页眉编号", key: "headNumber" },
  { title: "段落编号", key: "paragraphNumber" },
  
  { title: "创建人", key: "creatorName" },
  { title: "创建时间", key: "createday" },
  { title: "操作", width: "150px", customSlot: "operator", key: "operator", fixed: "right", ignoreExport: true },
]);

const pageNo = ref(1);
const pageSize = ref(10);
const tableData = ref([]);

const get_List = async () => {
  const res = await http.corsApi("/meetingNumber/page", "get", {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  });
  console.log(res);
  if (res.data) {
    tableData.value = res.data.list;
  }
};
</script>

<style scoped lang="scss">
.number-base {
  width: 100%;
  //   height: 100%;
  margin-top: 20px;
  background-color: #fff;
}
</style>